<template>
	<!-- 项目节点 -->
	<div class="">
		<div class="node">
			<div class="d-flex m-b20">
				<div class="nodeName">节点名称</div>
				<div class="nodeTarget">节点目标(万元)</div>
			</div>
			<el-tree
				:data="dataTree"
				node-key="projectStageId"
				default-expand-all
				:expand-on-click-node="false"
				@node-click="handleNodeClick"
			>
				<template #default="{ data }">
					<span class="custom-tree-node">
						<span>{{ data.label }}</span>
						<!-- <span>
                <span class="projectPeople" @click="append(data)">
                  进场人员
                </span>
              </span> -->
					</span>
				</template>
			</el-tree>
		</div>

		<CommonTitle class="m-t20 m-b20" titleName="节点任务"></CommonTitle>
		<el-tabs
			v-model="state.btnActiveName"
			type="card"
			class="demo-tabs"
			@tab-change="tabHandleClick"
		>
			<el-tab-pane label="表格形式" name="0"></el-tab-pane>
			<el-tab-pane label="甘特图" name="1"></el-tab-pane>
		</el-tabs>

		<div class="d-flex">
			<div class="table_sty">
				<tableIndex
					:tableData="state.tableData"
					:tableHead="state.tableHead"
					:isIndex="true"
					:height="500"
					:page="state.page"
					:not-search="true"
					@selectChange="selectChange"
					@page-change="pageChange"
				>
					<template #operate> </template>
				</tableIndex>
			</div>
			<div class="gantt_sty" v-show="state.btnActiveName == 1">
        222
				<!-- <GanttChart
              v-if="state.dateList"
              :ganttList="state.dateList"
              ref="ganttee"
            /> -->
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive ,onBeforeMount} from "vue";
import CommonTitle from "@/components/CommonTitle.vue";
import tableIndex from '@/components/table/index.vue'
// import GanttChart from './components/gantt_chart.vue'

import {
	ElTabs,
	ElTree,
	ElTabPane,
	ElMessage,
	ElMessageBox,
	ElButton,
	ElTableColumn,
} from "element-plus";

const state = reactive({
  btnActiveName: "0",
  tableData: [{}],
  tableHead: [
    {
      prop: 'taskName',
      label: '任务名称',

      style: {
        color: 'red',
        rgb: (252, 112, 24)
      }
    },
    {
      prop: 'taskCode',
      label: '任务代码'
    },
    {
      prop: 'date',
      label: '关注',
      isSvg: ['gz_true', 'gz_false']
    },
    {
      prop: 'taskContent',
      label: '工作细项'
    },
    {
      prop: 'status',
      label: '作业状态',
      formatter: (row) => {
        let str = ''
        // -1未完成0进行中1完成
        switch (row.status) {
          case -1:
            str = '未完成'
            break
          case 0:
            str = '进行中'
            break
          case 1:
            str = '完成'
            break

          default:
            break
        }
        return str
      }
    },
    {
      prop: 'planStartTime',
      label: '计划开始时间'
    },
    {
      prop: 'planEndTime',
      label: '计划完成时间'
    },
    {
      prop: 'workPeriod',
      label: '工期'
    },
    {
      prop: 'problemRemark',
      label: '存在的问题及困难'
    },
    {
      prop: 'responsibleUserName',
      label: '责任人'
    },
    {
      prop: 'responsibleDepartmentName',
      label: '责任部门'
    },
    {
      prop: 'delayStatus',
      label: '是否超时',
      formatter: (row) => {
        return row.date == '1' ? '超时' : '未超时'
      }

      // 1超时 0 未超时
    },
    {
      prop: 'realStartTime',
      label: '实际开始时间'
    },
    {
      prop: 'realEndTime',
      label: '实际完成时间'
    }
  ],
  page: {
    page: 1,
    pageSize: 10,
    total: 0
  }
});
const dataTree = ref([
	{
		id: 1,
		label: "Level one 1",
		children: [
			{
				id: 4,
				label: "Level two 1-1",
				children: [
					{
						id: 9,
						label: "Level three 1-1-1",
					},
					{
						id: 10,
						label: "Level three 1-1-2",
					},
				],
			},
		],
	},
	{
		id: 2,
		label: "Level one 2",
		children: [
			{
				id: 5,
				label: "Level two 2-1",
			},
			{
				id: 6,
				label: "Level two 2-2",
			},
		],
	},
	{
		id: 3,
		label: "Level one 3",
		children: [
			{
				id: 7,
				label: "Level two 3-1",
			},
			{
				id: 8,
				label: "Level two 3-2",
			},
		],
	},
]);


const pageChange = (e) => {
  state.page.page = e.page
  state.page.pageSize = e.limit

  // getListPage()
}

//表格选中内容
const selectChange = (val) => {
  console.log(val)
}

const tabHandleClick = (data) => {
	console.log(state.btnActiveName);
	switch (state.btnActiveName) {
		case "0":
			break;
		case "1":
			break;
	}
};

// tabel 数据
const getListPage = () => {
  // projectTask.getStageDetail(props.projectId || '').then((res) => {
  //   if (res.code == 200) {
  //     Object.assign(dataTree, {
  //       data: res.data.stageVo.stages
  //     })
  //     state.data = res.data
  //   }
  // })
}


const handel = () => {};
const handleNodeClick = (data) => {};

onBeforeMount(() => {
  // getListPage()
})
</script>
<style lang="scss" scoped>
.node {
	min-height: 366px;
	border-radius: 12px;
	border: 1px solid #e3e7f1;
	padding: 34px 40px 34px 30px;
	.d-flex {
		font-size: 16px;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		font-weight: 700;
		color: #7d7d9a;
		.nodeName {
		}
		.nodeTarget {
			margin-left: 300px;
		}
	}
}



.projectPeople {
  color: #fff;
  cursor: pointer;

  text-align: center;
  font-size: 12px;
  height: 20px;

  line-height: 20px;
  margin-left: 20px;
  background-color: #d4ae85;
  border-radius: 10px;
  padding-left: 5px;
  padding-right: 5px;
}
.gantt_sty {
  height: 500px;
  margin-top: 50px;

  overflow-y: scroll;
}
.table_sty {
  min-width: 1300px;
}
</style>
